<template>
  <view
    class="hoverBallBox"
    :style="{
      width: `${diameter}px`,
      height: `${diameter}px`,
      top: `${top}px`,
      left: `${left}px`,
    }"
    @touchmove="touchmove"
    @touchend="touchend"
    @touchcancel="touchcancel"
    @click.stop="scanCode"
    :animation="ballAnimation"
  >
    <image src="https://onelive.obs.cn-south-1.myhuaweicloud.com/uniapp/static/image220701%288%29.png" mode="widthFix" style="width:100%;height:auto;" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      diameter: 0,
      top: 0,
      left: 0,
      paddingX: 20, // 左右边距
      paddingY: 10, // 上下边距
      isMove: false,
      ballAnimation: {},
      timeout: null,
      modile: {},
    };
  },
  name: "hover-ball",
  created() {
    let _this = this;
    _this.modile = _this.$store.state.deviceInfo;
    _this.diameter = 54; // 图标大小
    _this.top = _this.modile.safeArea.height - _this.diameter * 2; // 初始位置
    _this.left = _this.modile.safeArea.width - _this.diameter - 20; // 初始位置
  },
  methods: {
    // 点击扫一扫
    scanCode(){
        uni.scanCode({
            success: (res) => {
              console.log(res,'扫码参数');
              
              if(res.path){
                this.goPage(`/${res.path}`)
              }else if(res.scanType === 'QR_CODE' && res.result.indexOf('mp_inspection') !== -1){
                this.goPage(`/pagesC/reserveExp/inspection?q=${encodeURIComponent(res.result)}`)
              }else{
                uni.showToast({
                  title: '暂不支持的二维码',
                  icon: 'none'
                })
              }
            }
        })
    },
    touchmove(e) {
      let _this = this;
      _this.isMove = true;
      if (_this.timeout != null) {
        clearTimeout(_this.timeout);
        _this.timeout = null;
      }
      var touch = e.touches[0] || e.changedTouches[0];
      _this.left = touch.clientX;
      _this.top = touch.clientY;
    },
    touchend(e) {
      let _this = this;
      if (!_this.isMove) {
        return;
      }
      _this.finish(e);
    },
    touchcancel(e) {
      let _this = this;
      if (!_this.isMove) {
        return;
      }
      _this.finish(e);
    },
    finish(e) {
      let _this = this;
      _this.isMove = false;
      var touch = e.touches[0] || e.changedTouches[0];
      _this.left = touch.clientX;
      _this.top = touch.clientY;
      let x = "0";

      if (2 * _this.left + _this.diameter >= _this.modile.safeArea.width) {
        // 右侧滑动出屏幕外,归位
        _this.left = _this.modile.safeArea.width - _this.diameter - _this.paddingX;
      } else {
        // 左侧滑动出屏幕外,归位
        _this.left = _this.paddingX;
      }
      if (_this.top > _this.modile.safeArea.height - _this.diameter - _this.paddingY) {
        // 底部划出最大高度,归位
        _this.top = _this.modile.safeArea.height - _this.diameter - _this.paddingY;
      } else if (_this.top < _this.modile.navbarHeight + _this.paddingY) {
        // 顶部划出最小高度,归位
        _this.top = _this.modile.navbarHeight + _this.paddingY
      }
      let create = uni.createAnimation({
        duration: 0,
      });
      create.translate(x).step();
      _this.ballAnimation = create.export();
      //   _this.overBall();
    },

    // 拖动结束后,收回50%
    overBall() {
      let _this = this;
      _this.timeout = setTimeout(() => {
        _this.timeout = null;
        let create = uni.createAnimation({
          duration: 400,
          timingFunction: "ease-in",
        });
        create.translate("-50%").step();
        _this.ballAnimation = create.export();
      }, 1200);
    },
  },
};
</script>

<style lang="scss" scoped>
.hoverBallBox {
  position: fixed;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  //   transform: translate(-50%, 0);
}
</style>
